<template>
  <div class="editor-slider" :class="{ 'is-vertical': props.vertical }">
    <el-slider
      v-model="sliderValue"
      :min="props.min"
      :max="props.max"
      :step="props.step"
      :show-input="props.showInput"
      :show-stops="props.showStops"
      :range="props.range"
      :vertical="props.vertical"
      :height="props.vertical ? `${props.height}px` : undefined"
      :style="sliderStyle"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, computed } from 'vue';
import { ElSlider } from 'element-plus';

const props = defineProps({
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 100
  },
  step: {
    type: Number,
    default: 1
  },
  defaultValue: {
    type: Number,
    default: 50
  },
  showInput: {
    type: Boolean,
    default: true
  },
  showStops: {
    type: Boolean,
    default: false
  },
  range: {
    type: Boolean,
    default: false
  },
  vertical: {
    type: Boolean,
    default: false
  },
  height: {
    type: Number,
    default: 200
  },
  activeColor: {
    type: String,
    default: '#8B4513'
  },
  backgroundColor: {
    type: String,
    default: '#e0e0e0'
  }
});

// 初始滑块值
const sliderValue = ref(props.defaultValue);

// 计算滑块样式
const sliderStyle = computed(() => {
  return {
    '--el-slider-main-bg-color': props.activeColor,
    '--el-slider-runway-bg-color': props.backgroundColor
  };
});

defineOptions({
  name: 'editor-slider'
});
</script>

<style lang="scss" scoped>
.editor-slider {
  width: 100%;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  &.is-vertical {
    height: auto;
    
    :deep(.el-slider) {
      height: 100%;
    }
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 